<template>
  <el-table
    ref="tab"
    :class="tableClassList"
    style="width: 100%"
    tooltip-effect="dark"
    :border="border"
    :stripe="stripe"
    v-bind="$attrs"
    :header-cell-style="headerStyle"
    :cell-style="cellStyle"
  >
    <!-- Selection Columns -->
    <template v-if="selectionType === 'checkbox'">
      <el-table-column
        type="selection"
        width="50"
        align="center"
        :reserve-selection="reserveSelection"
        :selectable="selectable"
      ></el-table-column>
    </template>
    <template v-else-if="selectionType === 'radio'">
      <el-table-column align="center" width="50">
        <template #default="{ row, $index }">
          <el-radio
            :label="$index"
            v-model="radioValue"
            @input="onRadioChange(row)"
            >&nbsp;</el-radio
          >
        </template>
      </el-table-column>
    </template>

    <!-- Table Columns -->
    <el-table-column
      v-for="column in tableColumns"
      :key="column._listKey"
      v-bind="column"
      :min-width="column.minWidth || '200px'"
      :show-overflow-tooltip="
        column.showOverflowTooltip || column['show-overflow-tooltip']
      "
    >
      <!-- Column Header -->
      <template #header="{ column }">
        <template v-if="column.customHeader">
          <slot :name="column.customHeader" :column="column"></slot>
        </template>
        <template v-else>
          {{ column.label }}
          <template v-if="column.tips">
            <el-tooltip
              popper-class="tooltipAssess"
              class="item"
              effect="dark"
              :content="column.tips"
              placement="top"
            >
              <SvgIcon class="icon" :size="16" iconClass="hint" />
            </el-tooltip>
          </template>
        </template>
      </template>

      <!-- Column Content -->
      <template #default="{ row, $index }">
        <template v-if="!row._hidden">
          <slot
            :name="column.slotName ? column.slotName : ''"
            :row="row"
            :index="$index"
            :column="column"
          >
            <template v-if="column.type === 'index'">
              {{ $index + 1 }}
            </template>
            <template v-else>
              {{ formatProp(row[column.prop]) }}
            </template>
          </slot>
        </template>
      </template>
    </el-table-column>

    <!-- Operation Column -->
    <template v-if="showOperation">
      <el-table-column v-bind="operationColumn">
        <template #default="{ row, $index }">
          <slot name="operation" :row="row" :index="$index"></slot>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>

<script setup>
import {
  ref,
  computed,
  onBeforeMount,
  onBeforeUpdate,
  nextTick,
  defineProps,
  defineEmits,
} from "vue";
// import { headerStyle, cellStyle } from "./options";
// import SvgIcon from "@/components/SvgIcon.vue"; // Assuming SvgIcon is a custom component

const tab = ref(null);
const radioValue = ref("");
const props = defineProps([
  "columns",
  "showOperation",
  "operationAttrs",
  "selection",
  "radio",
  "reserveSelection",
  "selectable",
  "border",
  "stripe",
  "hover",
]);
// const columns = defineProps(["columns"]);
// const showOperation = defineProps({ type: Boolean, default: true });
// const operationAttrs = defineProps({ type: Object, default: () => ({}) });
// const selection = defineProps({ type: [Boolean, String], default: false });
// const radio = defineProps({ type: Boolean, default: false });
// const reserveSelection = defineProps({ type: Boolean, default: false });
// const selectable = defineProps({ type: Function, default: () => true });
// const border = defineProps({ type: Boolean, default: true });
// const stripe = defineProps({ type: Boolean, default: true });

const emit = defineEmits(["selection-change"]);

const operationColumn = computed(() => ({
  label: "操作",
  ...props.operationAttrs,
}));

const selectionType = computed(() => {
  if (props.selection === false) {
    return "";
  } else if (props.selection === true) {
    return "checkbox";
  } else {
    return props.selection;
  }
});

const tableClassList = computed(() => {
  const classList = {};
  if (!props.hover.value) {
    classList["no-hover"] = true;
  }
  return classList;
});

const tableColumns = computed(() => {
  return props.columns.value.map((column) => {
    const _listKey = column.prop || column.slotName;
    return { ...column, _listKey };
  });
});

const formatProp = (value) => {
  if (value) return value;
  if (typeof value === "number") {
    return value;
  }
  return "-";
};

onBeforeUpdate(() => {
  nextTick(() => {
    tab.value.doLayout();
  });
});

const toggleRowSelection = (row, result) => {
  if (selectionType.value === "radio") {
    radioValue.value = result;
    onRadioChange(row);
  } else {
    tab.value.toggleRowSelection(row, result);
  }
};

const onRadioChange = (row) => {
  emit("selection-change", [row]);
};

const clearSelection = () => {
  if (selectionType.value === "radio") {
    radioValue.value = "";
    emit("selection-change", [{}]);
  } else {
    tab.value.clearSelection();
  }
};
</script>

<style scoped>
/* Your styles here */
</style>
